<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <script src="./js/jquery-3.6.0-min.js"></script>
    <script src="./layer/layer.js"></script>
</head>
<body>
<form action="">
    <h4>修改个人信息</h4>
    <table>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="username" placeholder="请输入昵称"></td>
        </tr>
        <tr>
            <td>手机号：</td>
            <td><input type="number" placeholder="请输入手机号" name="tel"></td>
        </tr>
        <tr>
            <td>昵称：</td>
            <td><input type="text" placeholder="请输入昵称" name="nickname"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="修改信息"><a href="./index.html">返回首页</a></td>
        </tr>
    </table>
</form>
</body>
<script>
// 在本地里获取名字和个人信息
var name=localStorage.getItem('name')
var userInfo=localStorage.getItem('userInfo')
userInfo=JSON.parse(userInfo)
$('[name="username"]').val(name)
$('[name="tel"]').val(userInfo.tel)
$('[name="nickname"]').val(userInfo.nickname)

$('form').on('submit',function(){
    var username=$('[name="username"]').val()
    var tel=$('[name="tel"]').val()
    var nickname=$('[name="nickname"]').val()

    // 发送Ajax
    var xhr=new XMLHttpRequest;
    xhr.open('post','/api/editinfo')
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(`username=${name}&nickname=${nickname}&tel=${tel}`)
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            if(xhr.status>=200&&xhr.status<300){
                var res=xhr.responseText;
                res=JSON.parse(res)
                console.log(res)
                if(res.code===1){
                    layer.msg(res.msg,{
                        icon:1,
                        time:1500
                    },()=>{
                        window.localStorage.removeItem('name')
                        window.localStorage.removeItem('userInfo')
                        location.href='../login.html'
                    })

                }
            }
        }
    }
    return false
})
</script>
</html>